<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小免鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电电商,购物">
    <title>小免鲜儿-新鲜、惠民、快捷!</title>
    <link rel="shortcut icon" href="https://chuanjiujiu.gitee.io/jingtaiyemian/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./图片/base.css">
    <link rel="stylesheet" href="./图片/commer.css">
    <link rel="stylesheet" href="./图片/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./iconfont1/iconfont.css">
    <link rel="stylesheet" href="./icofont2/iconfont.css">
    <link rel="stylesheet" href="./icofont4/iconfont.css">
    <link rel="stylesheet" href="./icofont5/iconfont.css">
</head>

<body>
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#" class="login">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span class="iconfont icon-xiaoshouji"></span>手机版</a></li>
            </ul>
        </div>
    </div>
    <!-- 完结1 -->
    <!-- 头部 -->
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo">
            <h1><a href="#">
                    <img src="./图片/logo.png" alt="">
                </a></h1>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">餐厨</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">孕婴</a></li>
                <li><a href="#">服装</a></li>
            </ul>
        </div>
        <!-- 购物车 -->
        <div class="search">
            <span class="iconfont icon-fangdajing
            "></span>
            <input type="text" placeholder="搜一搜">
        </div>
        <!-- 购物车 -->
        <div class="cart">
            <span class="iconfont icon-gouwuche"></span>
            <i>99+</i>
        </div>
    </div>
    <!-- 完结2 -->
    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 图片 -->
            <div class="luobo">
                <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b1.jpg" alt="">
            </div>
            </ul>
            <!-- 测导航 -->
            <div class="subnay">
                <ul>
                    <li>
                        <div>
                            <a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">美实</a><a href="#">面包</a><a href="#">干果</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">餐厨</a><a href="#">数码</a><a href="#">产品</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                    <li>
                        <div>
                            <a href="#" class="classify">品牌</a><a href="#">品牌制造</a>
                        </div>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </li>
                </ul>
            </div>
            <!-- 圆点指示器 -->
            <ol class="yuan">
                <li class="current"><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
            </ol>
        </div>
    </div>


    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>新鲜好物</h3>
                <p>新鲜出炉 品质靠谱</p>
            </div>
            <div class="right">
                <a href="#" class="more">查看全部<span class="iconfont icon-xiangyoujiantou
                    "></span></a>

            </div>
        </div>
        <!-- 类容 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/新鲜好物1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰迪色防护口罩</h4>
                            <p>￥<span>79</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/新鲜好物2.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>紫檀外独板三层普洱茶盒</h4>
                            <p>￥<span>566</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/新鲜好物3.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>法拉蒙高颜值记事本可定制</h4>
                            <p>￥<span>58</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/新鲜好物4.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>科技布布艺沙发</h4>
                            <p>￥<span>3579</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>



    <!-- 人气推荐 -->
    <div class="reccmmend wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>人气推荐</h3>
                <p>新鲜出炉 品质靠谱</p>
            </div>
        </div>
        <!-- 类容 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/人气推荐1.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>特惠推荐</h4>
                            <p>我猜得到 你的需要</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/人气推荐2.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>爆款推荐</h4>
                            <p>人气好物推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/人气推荐3.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>节日礼品一站买全</h4>
                            <p>编辑尽心整理推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./图片/人气推荐4.jpg" alt="">
                        </div>
                        <div class="txt">
                            <h4>鲜花园艺</h4>
                            <p>给生活增加仪式感</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>


    <!-- 热门品牌 -->
    <div class="brand">
        <div class="wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">
                    <h3>热门品牌</h3>
                    <p>新鲜出炉 品质靠谱</p>
                </div>
                <div class="button">
                    <a href="#" class="prev">
                        <span class="iconfont icon-xiangzuojiantou"></span>
                    </a>
                    <a href="#" class="next">
                        <span class="iconfont icon-xiangyoujiantou
                        "></span>
                    </a>
                </div>
            </div>
            <!-- 内容 -->
            <div class="bd">
                <ul>
                    <li><a href="#"><img src="./图片/热门品牌1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./图片/热门品牌2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./图片/热门品牌3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./图片/热门品牌4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./图片/热门品牌5.jpg" alt=""></a></li>
                </ul>
            </div>

        </div>
    </div>

    <!-- 生鲜 -->
    <div class="fresh wrapper">
        <div class="title">
            <div class="left">
                <h3>生鲜</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#" class="activ">热门</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li><a href="#">肉禽蛋</a></li>
                    <li><a href="#">水果</a></li>
                    <li><a href="#">海鲜</a></li>
                    <li><a href="#">零食</a></li>
                    <li><a href="#">饮料</a></li>
                </ul>
                <a href="#" class="more">查看全部<span class="iconfont icon-xiangyoujiantou
                    "></span></a>

            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="left">
                <a href="#">
                    <img src="./图片/生鲜1.jpg" alt="">
                </a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜2.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>双味千层，手抓饼烤肉组合</h4>
                                    <p>240g/袋4片装</p>
                                    <p>加热即食</p>
                                </div>
                                <div class="price">￥ <span>89.99</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>

                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜3.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>云南甘蔗慢熬红糖馒头</h4>
                                    <p>220g/袋5个装</p>
                                    <p>加热即食</p>
                                </div>
                                <div class="price">￥ <span>9.00</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜4.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>日式风味小圆饼</h4>
                                    <p>圆形[海盐味]</p>
                                    <p>糖果零食</p>
                                </div>
                                <div class="price">￥ <span>588.00</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜5.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>全麦奶油浓香小面包</h4>
                                    <p>50g*12袋</p>
                                    <p>美味西点</p>
                                </div>
                                <div class="price">￥ <span>69.00</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜6.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>秘制外皮五福摩提大福点心</h4>
                                    <p>150g/盒</p>
                                    <p>美味西点</p>
                                </div>
                                <div class="price">￥ <span>39.99</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜7.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>双水果面膜韩国蜂蜜柚子茶</h4>
                                    <p></p>
                                    <p>加热即食</p>
                                </div>
                                <div class="price">￥ <span>89.99</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜8.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>浓情比利时巧克力礼盒装</h4>
                                    <p>205克/盒</p>
                                    <p>糖果零食</p>
                                </div>
                                <div class="price">￥ <span>120.00</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./图片/生鲜9.jpg" alt="">
                            </div>
                            <div class="txt">
                                <div class="info">
                                    <h4>抹茶奶油小蛋糕礼盒装</h4>
                                    <p>220克/盒</p>
                                    <p>美味西点</p>
                                </div>
                                <div class="price">￥ <span>60.00</span></div>
                            </div>
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-xiangyoujiantou"></span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 最新专题 -->
    <!-- <div class="topic wrapper">
        <div class="title">
            <div class="left">
                <h3>最新专题</h3>
            </div>
            <div class="right">
                <a href="#" class="more">查看全部<span class="iconfont icon-xiangyoujiantou
                    "></span></a>
                
            </div>
        </div>

        <div class="topic-bd">
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div> -->


    <!-- 底部 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 服务 -->
            <div class="service">
                <ul>
                    <li>
                        <h5><img src="./图片/底部图1.jpg" alt=""></h5>
                        <p>价格亲民</p>
                    </li>
                    <li>
                        <h5><img src="./图片/底部图2.jpg" alt=""></h5>
                        <p>物流快捷</p>
                    </li>

                    <li>
                        <h5><img src="./图片/底部图3.jpg" alt=""></h5>
                        <p>品质新鲜</p>
                    </li>

                    <li>
                        <h5><img src="./图片/底部图4.jpg" alt=""></h5>
                        <p>售后无忧</p>
                    </li>
                </ul>
            </div>
            <!-- 帮助中心 -->
            <div class="help">
                <div class="left">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">支付方式</a></dd>
                        <dd><a href="#">售后规则</a></dd>
                    </dl>

                    <dl>
                        <dt>配送方式</dt>
                        <dd><a href="#">配送运费</a></dd>
                        <dd><a href="#">配送范围</a></dd>
                        <dd><a href="#">配送时间</a></dd>
                    </dl>

                    <dl>
                        <dt>关于我们</dt>
                        <dd><a href="#">平台规则</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                        <dd><a href="#">问题反馈</a></dd>
                    </dl>

                    <dl>
                        <dt>售后服务</dt>
                        <dd><a href="#">售后政策</a></dd>
                        <dd><a href="#">退款说明</a></dd>
                        <dd><a href="#">取消订单</a></dd>
                    </dl>

                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">在线客服 <span class="iconfont icon-lianxikefu"></span></a></dd>
                        <dd><a href="#">客服电话 400-0000-000</a></dd>
                        <dd><a href="#">工作时间 周一至周日8:00-18:00</a></dd>
                    </dl>
                </div>
                <div class="right">
                    <img src="./图片/底部 二维码.jpg" alt="">
                </div>
            </div>
            <!-- 版权 -->
            <div class="copyright">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">帮助中心</a>|
                    <a href="#">售后服务</a>|
                    <a href="#">配送与验收</a>|
                    <a href="#">商务合作</a>|
                    <a href="#">搜索推荐</a>|
                    <a href="#">友情链接</a>
                </p>

                <p>CopyRight @ 小兔鲜</p>
            </div>
        </div>
    </div>

    <script>
        const arr = [
            { url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b1.jpg' },
            { url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b4.jpg' },
            { url: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/images/b2.jpg' }
        ]
        // 1 获取元素 
        const img = document.querySelector('.luobo img')
        // 2 定时器
        let i = 0
        let n = setInterval(function () {
            i++
            if (i >= arr.length) {
            i = 0
        }
        img.src = arr[i].url

        // 选小圆点
        // 给上一个li删除active
        document.querySelector('.yuan .current').classList.remove('current')
        // 给li添加新active
        document.querySelector(`.yuan li:nth-child(${i + 1})`).classList.add('current')
        },1000)

        //   业务4 暂停定时器和开启定时器
            const luobo = document.querySelector('.luobo')
            luobo.addEventListener('mouseenter', function () {
                clearInterval(n)
            })     //  关闭定时器
            luobo.addEventListener('mouseleave', function () {
                n = setInterval(function () {
                    i++
                    if (i >= arr.length) {
                        i = 0
                    }
                    img.src = arr[i].url

                    // 选小圆点
                    // 给上一个li删除active
                    document.querySelector('.yuan .current').classList.remove('current')
                    // 给li添加新active
                    document.querySelector(`.yuan li:nth-child(${i + 1})`).classList.add('current')
                }, 1000)
       })    //  开启定时器
    </script>
</body>

</html>